[React] jsx, tsx 파일의 주석 작성하는 방법은?

React앱에서 js, ts가 아닌 jsx, tsx 파일의 확장자를 사용하면 XML 방식으로 템플릿 코드를 작성할 수 있습니다. 이때 주석 작성 방법에 대하여 알아봅니다.

! React jsx, tsx의 주석 작성 방법

tsx 확장자 역시 동일하므로 jsx를 예로 들어 알아봅니다. tsx 파일이 아래와 같이 존재한다고 생각해봅니다.

@ comment.jsx

AComponent를 만들었죠. 내부의 render 함수를 보면 <ChildComponent>를 출력합니다. 이때 ChildComponent를 사용한다는 주석을 남기려고 합니다. 그 아래에 적으면 좋겠네요.

하지만!! 문제는 위와 같은 주석 표기는 에러가 발생합니다. 즉 render 함수의 return에는 // 처럼 주석 사용이 불가능합니다.

# React tsx, jsx 주석 사용 예제보기

주석 사용 방법은 여러가지가 존재하죠. 이때 사용 가능한 주석은 바로 /* 내용 */ 문법 한 가지 입니다. 즉 아래와 같이 사용해야 합니다.

여기서 주의할 점은? 바로 {}로 주석을 랩핑해주어야 한다는 점이니다. 이 점을 주의해야합니다.

이제 주석이 에러 없이 정상 동작하게 됩니다. 이때 /* */는 한 줄 주석(One line comment)가 아닌 멀티라인 주석(Multi-line Comments)입니다. 즉 여러 줄에 주석을 담을 수 있죠.

여기까지 React tsx의 템플릿 코드 작성시 주석 사용 방법에 대하여 알아봤습니다. 주석 사용의 습관은 매우 좋은 습관입니다. React에도 그에 맞는 주석 표기가 필요하죠!